<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.contextPath }/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	function getchild(){
		$.ajax({
			type:"get",
			url:"DataTypeServlet?parentid="+$("#parentid").val(),
			async:true,
			dataType:"json",
			success:childinfo,
			error:errorinfo
		});
	}
	function childinfo(data){
		var mydata=eval(data);
		var str="";
		for (var i = 0; i < mydata.length; i++) {
			str+="<option value='"+mydata[i].datatypeid+"'>"+mydata[i].datatypename+"</option>";
		}
		$("#childid").html(str);
	}
	function errorinfo(){
		alert("服务器出错了");
	}
	$(function(){
		$.ajax({
			type:"get",
			url:"DataTypeServlet?parentid=0",
			async:true,
			dataType:"json",
			success:cpidatatype,
			error:errorinfo
		});
	});
	function cpidatatype(data){
		var mydata=eval(data);
		var str="";
		for (var i = 0; i < mydata.length; i++) {
			str+="<option value='"+mydata[i].datatypeid+"'> "+mydata[i].datatypename+" </option>";
		}
		$("#parentid").html(str);
		getchild();
	}
</script>
</head>
<body>
      <select id="parentid" onchange="getchild()">
      	 
      </select>
      <select id="childid">
      
      </select>
</body>
</html>